<template>
  <div class="address">
    <div v-loading="loading" class="address-choose">
      <div v-if="addressList.length != 0" class="address-choose-fill">
        <div class="address-choose-title">请选择一个地址</div>
        <div class="address-choose-discription">请在下方选择您想要配送的地址，然后点击下方的“进入下一步”即可进入下一步操作，您也可以在下方添加新的地址，然后点击添加即可添加新地址</div>
        <div class="address-choose-items">
          <AddressItem v-for="item in addressList" v-model="addressId" :item="item" :key="item.id" />
        </div>
        <div class="address-choose-btn" @click="toMethod">
          进入下一步
        </div>
      </div>
      <div v-else class="address-choose-empty">
        <!-- 缺省图片 -->
        <el-empty description="您还没有添加配送地址哦~" />
      </div>
    </div>
    <div class="address-add">
      <div class="address-add-title">添加一个新地址</div>
      <div class="address-add-input-items">
        <div class="address-add-input-item">
          <div class="address-add-input-item-title">收件人</div>
          <div class="address-add-input-item-input">
            <input placeholder="请输入收件人" type="text">
          </div>
        </div>
        <div class="address-add-input-item">
          <div class="address-add-input-item-title">手机号</div>
          <div class="address-add-input-item-input">
            <input placeholder="请输入手机号" type="text">
          </div>
        </div>
        <div class="address-add-input-item">
          <div class="address-add-input-item-title">省市区</div>
          <div class="address-add-input-item-region">
            <el-cascader
              style="width: 100%;margin-top: 8px;height: 50px;"
              size="large"
              :options="region"
              placeholder="请选择省市区"
              @change="handleChange"
              v-model="selectItem"
            >
            </el-cascader>
          </div>
        </div>
        <div class="address-add-input-item">
          <div class="address-add-input-item-title">详细地址</div>
          <div class="address-add-input-item-detail">
            <el-autocomplete
              style="width: 100%;margin-top: 8px;height: 50px;"
              v-model="selectedState"
              :fetch-suggestions="querySearchAsync"
              clearable
              placeholder="请输入详细地址"
              @select="handleSelect"
              value-key="name"
            />
          </div>
        </div>
      </div>
      <div class="address-add-btn">添加新地址</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import AddressItem from '@/view/pay/address/addressItem/index.vue'
import { regionData } from 'element-china-area-data'
import { searchAPI } from '@/request/gaode'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()

const loading = ref(false)

const addressList = ref([
  {
    id: 1,
    name: '张三',
    phone: "13345678909",
    address: {
      province: "浙江省",
      provinceId: "33",
      city: "杭州市",
      cityId: "3301",
      district: "西湖区",
      districtId: "330106",
      detail: "文一西路88号"
    }
  },
  {
    id: 2,
    name: '李四',
    phone: "13345678909",
    address: {
      province: "江西省",
      provinceId: "36",
      city: "南昌市",
      cityId: "3601",
      district: "东湖区",
      districtId: "360102",
      detail: "延吉西路天一小区589弄45栋5层502号"
    }
  }
])

const region = ref(regionData)

// 省市区选中项
const selectItem = ref([])

// 已有地址中选中项的id
const addressId = ref(1)

// 输入框中输入的值
const selectedState = ref('')

interface SuggestList {
  data: object
}

// 搜索建议项
const querySearchAsync = async (querySearch: string, cb: (arg: any) => void) => {
  // querySearch为输入框中输入的值
  if (querySearch.length === 0) return
  if (selectItem.value.length === 0) {
    ElMessage({
      message: '请输入省市区！',
      type: 'warning'
    })
    return
  }

  const suggest:SuggestList | any = await searchAPI(querySearch, selectItem.value['2'])

  console.log(suggest)

  cb(suggest.data.tips)
}

// 选中项
const handleSelect = (item: Record<string, any>) => {
  console.log(item)
}

// 当修改省市区时，会调用该方法
const handleChange = (value: any) => {
  console.log(value['2'])
}


// 进入下一步
const toMethod = () => {
  // 放入会话存储中
  sessionStorage.setItem("addressId", addressId.value.toString())
  router.push({
    name: 'pay_method'
  })
}
</script>

<style lang="less" scoped>
.address {
  font-family: 'Helvetica';

  .address-choose {
    box-sizing: border-box;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(163, 170, 171, 0.2);

    .address-choose-fill {
      .address-choose-title {
        color: rgb(20, 28, 29);
        font-size: 20px;
        font-weight: 700;
      }

      .address-choose-discription {
        margin-top: 10px;
        color: rgb(20, 28, 29);
        font-size: 14px;
        font-weight: 400;
      }

      .address-choose-items {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }

      .address-choose-btn {
        margin-top: 30px;
        width: 360px;
        height: 48px;
        border-radius: 10px;
        background: rgb(8, 131, 149);

        color: rgb(255, 255, 255);
        font-size: 16px;
        font-weight: 400;

        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.4s;

        cursor: pointer;

        &:hover {
          background: rgb(22, 162, 184);
        }
      }
    }
  }

  .address-add {
    margin-top: 30px;

    .address-add-title {
      color: rgb(20, 28, 29);
      font-size: 20px;
      font-weight: 700;
    }

    .address-add-input-items {
      margin-top: 30px;

      .address-add-input-item:not(:first-child) {
        margin-top: 17px;
      }

      .address-add-input-item {
        .address-add-input-item-title {
          color: rgb(20, 28, 29);
          font-size: 12px;
          font-weight: 400;
        }

        .address-add-input-item-input {
          width: 100%;
          height: 50px;
          margin-top: 8px;

          input {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid rgba(163, 170, 171, 0.2);
            border-radius: 10px;
            padding: 13px 20px 13px 20px;

            outline: none;

            font-size: 16px;
            font-weight: 400;
            transition: border 0.4s;

            &:hover {
              border: 1px solid #088395;
            }

            &::placeholder {
              color: rgba(163, 170, 171, 0.8);
              font-weight: 400;
            }
          }
        }

        :deep(.address-add-input-item-region) {
          .el-input--large {
            --el-component-size-large: 50px;
          }

          .el-input {
            --el-border-radius-base: 10px;
            --el-border: 1px solid rgba(163, 170, 171, 0.2);
            --el-border-color: rgba(163, 170, 171, 0.2);
          }

          .el-input__inner {
            font-size: 16px;
          }

          .el-input__inner::placeholder {
            color: rgba(163, 170, 171, 0.8);
            font-weight: 400;
          }
        }

        :deep(.address-add-input-item-detail) {
          .el-autocomplete {
            --el-component-size: 50px;
            --el-border-radius-base: 10px;
            --el-border: 1px solid rgba(163, 170, 171, 0.2);
            --el-border-color: rgba(163, 170, 171, 0.2);
          }

          .el-input__inner {
            font-size: 16px;
          }

          .el-input__inner::placeholder {
            color: rgba(163, 170, 171, 0.8);
            font-weight: 400;
          }

          .el-input__wrapper {
            padding: 2px 20px;
          }
        }
      }
    }
    
    .address-add-btn {
      width: 360px;
      height: 50px;
      border-radius: 10px;
      background: rgb(8, 131, 149);

      display: flex;
      align-items: center;
      justify-content: center;

      color: rgb(255, 255, 255);
      font-size: 16px;
      font-weight: 400;

      margin-top: 44px;

      cursor: pointer;

      transition: background 0.4s;

      &:hover {
        background: rgb(22, 162, 184);
      }
    }
  }
}
</style>